<template>
  <div>
    <div class="trans-block">
      <div class="trans-left">
        <div class="trans-top">
          <div class="trans-all">
            <div :class="checkedAll?'act':'normal'" @click="handleCheckedAll"><div class="act-check"></div></div>
            <span v-show="checkedAll" style="margin-left: 10px;cursor: pointer" @click="handleCheckedAll">取消全选</span>
            <span v-show="!checkedAll" style="margin-left: 10px;cursor: pointer" @click="handleCheckedAll">全 选</span>
          </div>
          <span>{{ num2 }} / {{ num1 }}</span>
        </div>
        <div class="trans-data" ref="transLeft">
          <div v-for="item in list" class="trans-line" v-show="item.show">
            <div :class="item.checked?'act':'normal'" @click="changeNum2(item)"><div class="act-check"></div></div>
            <span :style="{'color':item.checked?'#409EFF':'#606266'}" class="act-font" @click="changeNum2(item)">{{ item.label }}</span>
          </div>
        </div>
      </div>
      <div class="trans-middle">
        <el-button type="primary" icon="el-icon-arrow-left" @click="handleAdd"></el-button>
        <el-button type="primary" icon="el-icon-arrow-right" @click="handleSub"></el-button>
      </div>
      <div class="trans-left">
        <div class="trans-top">
          <div class="trans-all">
            <div :class="selectedAll?'act':'normal'" @click="handleSelectAll"><div class="act-check"></div></div>
            <span v-show="selectedAll" style="margin-left: 10px;cursor: pointer" @click="handleSelectAll">取消全选</span>
            <span v-show="!selectedAll" style="margin-left: 10px;cursor: pointer" @click="handleSelectAll">全 选</span>
          </div>
          <span>{{ num4 }} / {{ num3 }}</span>
        </div>
        <div class="trans-data">
          <div v-for="item in list" class="trans-line" v-show="!item.show">
            <div :class="item.checked?'act':'normal'" @click="changeNum4(item)"><div class="act-check"></div></div>
            <span :style="{'color':item.checked?'#409EFF':'#606266'}" class="act-font" @click="changeNum4(item)">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      checkedAll: false,
      selectedAll: false,
      num1: this.len,
      num2: 0,
      num3: 0,
      num4: 0,
      left: null,
      height: 0
    }
  },
  props: {
    list: {
      type: Array
    },
    len: {
      type: Number,
    }
  },
  methods: {
    handleCheckedAll() {
      this.checkedAll = !this.checkedAll;
      this.list.filter(item=>{if(item.show)return item.checked=this.checkedAll});
      this.static();
    },
    handleSelectAll() {
      this.selectedAll = !this.selectedAll;
      this.list.filter(item=>{if(!item.show)return item.checked=this.selectedAll});
      this.static();
    },
    changeNum2(row) {
      row.checked = !row.checked;
      if (row.checked) {
        this.num2++
      } else {
        this.num2--
      }
    },
    changeNum4(row) {
      row.checked = !row.checked;
      if (row.checked) {
        this.num4++
      } else {
        this.num4--
      }
    },
    handleAdd() {
      this.list.map(item => {
        if (!item.show && item.checked) {
          item.show = !item.show;
          item.checked = false;
        }
      })
      this.static();
      this.selectedAll = false;
    },
    handleSub() {
      this.list.map(item => {
        if (item.show && item.checked) {
          item.show = !item.show;
          item.checked = false;
        }
      })
      this.static();
      this.checkedAll = false;
    },
    static() {
      let i = 0;
      let j = 0;
      let r = 0;
      let l = 0;
      for (let item of this.list) {
        if (item.show) {
          i++
          if (item.checked) {
            r++
          }
        } else if (!item.show) {
          j++;
          if (item.checked) {
            l++
          }
        }
      }
      this.num1 = i;
      this.num2 = r;
      this.num3 = j;
      this.num4 = l;
    }
  }
}
</script>

<style scoped>
.trans-block {
  width: 750px;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.trans-left {
  width: 280px;
  height: auto;
  border: 1px solid #E4E7ED;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.trans-middle {
  width: 120px;
  height: 440px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trans-top {
  width: 90%;
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  border-bottom: 1px solid #EBEEF5;
  color: #606266;
  font-size: 14px;
}

.trans-data {
  width: 100%;
  height: 405px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.trans-line {
  width: 100%;
  height: 30px;
  padding: 0 5%;
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  display: flex;
  align-items: center;
}

.trans-line:hover {
  background: #F2F7FF;
  color: #409EFF;
  cursor: pointer;
}

.trans-all {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.act{
  width: 14px;
  height: 14px;
  background: #409EFF;
  border: solid 1px #409EFF;
  transition: background-color ease-out 0.1s;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  position: relative;
  color:#409EFF;
}
.act-check{
  content: "";
  display: block;
  width: .3rem;
  height: .55rem;
  border-left: .1rem solid #fff;
  border-top: .1rem solid #fff;
  border-radius: .06rem;
  box-sizing: border-box;
  position: absolute;
  z-index: 10;
  top: 0;
  transform: rotate(-133deg) translate(-70%, 25%);
  transition: background-color ease-out 0.1s;
  color:#409EFF;
}
.normal{
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  -webkit-border-radius: 50%;
  border-radius: 1px;
  font-size: 14px;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.6s;
  transition: background-color ease 0.1s;
  outline: none;
  box-shadow:  0 1px 5px 0 rgba(0, 0, 0, 0.1);
  color:#606266;
}
.act-font{
  margin-left: 10px;
}

</style>
